<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>表格合并示例 - 新版</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
      width: 80%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #888;
      padding: 8px 12px;
      text-align: center;
    }
    th {
      background-color: #eee;
    }
  </style>
</head>
<body>

<div id="tableContainer"></div>

<script>
  $(function () {
    const backendData = {
      list: [
        {
          rq: "2025-04-07",
          ssdw_name: "神东煤炭",
          team_name: "掘进一队",
          equipment_name: "EBZ160",
          workingface_name: "1105工作面",
          day_plan_jc: "12.5",
          day_actual_jc: "10.0",
          day_diff_jc: "-2.5",
          mounth_plan_jc: "300",
          mounth_actual_jc: "240",
          mounth_diff_jc: "-60",
          year_plan_jc: "3600",
          year_actual_jc: "3200",
          year_diff_jc: "-400"
        }
      ]
    };

    const data = [
      { title: "", name: "数据日期", props: "rq" },
      { title: "", name: "服务单位", props: "ssdw_name" },
      { title: "", name: "掘进队伍", props: "team_name" },
      { title: "", name: "设备类型", props: "equipment_name" },
      { title: "", name: "作业地点", props: "workingface_name" },

      { title: "日完成情况", name: "计划(m)", props: "day_plan_jc" },
      { title: "日完成情况", name: "完成(m)", props: "day_actual_jc" },
      { title: "日完成情况", name: "超欠(m)", props: "day_diff_jc" },

      { title: "月完成情况", name: "计划(m)", props: "mounth_plan_jc" },
      { title: "月完成情况", name: "累计(m)", props: "mounth_actual_jc" },
      { title: "月完成情况", name: "均衡超欠(m)", props: "mounth_diff_jc" },

      { title: "年完成情况", name: "计划(m)", props: "year_plan_jc" },
      { title: "年完成情况", name: "累计(m)", props: "year_actual_jc" },
      { title: "年完成情况", name: "均衡超欠(m)", props: "year_diff_jc" }
    ];

    let html = '<table><tr></tr>';

    for (let i = 0; i < data.length; i++) {
      const row = data[i];
      const value = backendData.list[0][row.props] || "--";

      if (i < 5) {
        html += `<tr><td colspan="2">${row.name}</td><td>${value}</td></tr>`;
      } else if (i === 5) {
        html += `<tr><td rowspan="3">${row.title}</td><td>${row.name}</td><td>${value}</td></tr>`;
      } else if (i > 5 && i <= 7) {
        html += `<tr><td>${row.name}</td><td>${value}</td></tr>`;
      } else if (i === 8) {
        html += `<tr><td rowspan="3">${row.title}</td><td>${row.name}</td><td>${value}</td></tr>`;
      } else if (i > 8 && i <= 10) {
        html += `<tr><td>${row.name}</td><td>${value}</td></tr>`;
      } else if (i === 11) {
        html += `<tr><td rowspan="3">${row.title}</td><td>${row.name}</td><td>${value}</td></tr>`;
      } else if (i > 11 && i <= 13) {
        html += `<tr><td>${row.name}</td><td>${value}</td></tr>`;
      }
    }

    html += '</table>';
    $('#tableContainer').html(html);
  });
</script>

</body>
</html>
